<template>
  <div class="swiper">
    <swiper
      :style="{ width: '100%', height: '100%' }"
      ref="mySwiper"
      :options="swiperOptions"
      @mouseenter.native="mouseEnter"
      @mouseleave.native="mouseLeave"
    >
      <swiper-slide v-for="(item, i) in list" :key="i">
        <div class="swiper-item">
          <div class="swiper-item-picture">
            <img :src="item.img" alt="" />
          </div>
          <!-- <div class="swiper-item-describe">{{ item.describe }}</div> -->
        </div>
      </swiper-slide> 
    </swiper>
    <!-- swiper两边按钮 -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
</template>
 
<script>
// swiper轮播引入
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
 
export default {
  data() {
    return {
      data: {},
      // swiper配置项
      swiperOptions: {
        slidesPerView: 4, // 没页展示多少个swiper-slide，会一个个推进式轮播
        autoplay: false,   // 是否自动轮播
        // // swiper两边按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      list: [
        {
          img: require('../../assets/images/test1.jpg')
        },
        {
          img: require('../../assets/images/test2.jpg')
        },
        {
          img: require('../../assets/images/test3.jpg')
        },
        {
          img: require('../../assets/images/test1.jpg')
        },
        {
          img: require('../../assets/images/test2.jpg')
        },
        {
          img: require('../../assets/images/test3.jpg')
        },
        {
          img: require('../../assets/images/test1.jpg')
        },
        {
          img: require('../../assets/images/test2.jpg')
        },
        {
          img: require('../../assets/images/test3.jpg')
        },
        {
          img: require('../../assets/images/test1.jpg')
        },
        {
          img: require('../../assets/images/test2.jpg')
        },
        {
          img: require('../../assets/images/test3.jpg')
        },
        {
          img: require('../../assets/images/test1.jpg')
        },
        {
          img: require('../../assets/images/test2.jpg')
        },
        {
          img: require('../../assets/images/test3.jpg')
        },
        {
          img: require('../../assets/images/test1.jpg')
        },
        {
          img: require('../../assets/images/test2.jpg')
        },
        {
          img: require('../../assets/images/test3.jpg')
        },
      
      ]
    };
  },
  components: {
    // 轮播组件
    Swiper,
    SwiperSlide,
  },
  computed: {},
  created() {
    // 获取数据
    
  },
  mounted() {},
  methods: {
    // swiper鼠标移入移出
    mouseEnter() {
      this.$refs.mySwiper.$swiper.autoplay.stop();
    },
    mouseLeave() {
      this.$refs.mySwiper.$swiper.autoplay.start();
    },
  },
};
</script>
 
<style lang='scss' scoped>
.swiper {
  width: 100%;
  height: 100%;
  padding: 0 0.1rem;
  position: relative;
  &-item {
    height: 100%;
    padding: 0.1rem 0.15rem;
    &-picture {
      width: 100%;
      height: 90%;
      & > img {
        width: 100%;
        height: 100%;
      }
    }
    &-describe {
      width: 100%;
      height: 10%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 0.14rem;
      color: #cbccd3;
    }
  }
  ::v-deep  .swiper-button-prev {
    left: -45px
  }
  ::v-deep  .swiper-button-next {
    right: -43px
  }
  ::v-deep .swiper-button-prev:after, ::v-deep .swiper-button-next:after {
    width: 72px;
    height: 72px;
    position: absolute;
    content: ''
  }
  ::v-deep .swiper-button-prev:after {
    background: url('../../assets/images/left.png') no-repeat;
    background-size: 100% 100%;
  }
  ::v-deep .swiper-button-next:after {
    background: url('../../assets/images/right.png') no-repeat;
    background-size: 100% 100%;
  }
  ::v-deep .swiper-item {
    padding: 0 10px;
  }
}
</style>